<template>
  <div>
    <h1>我是Footer</h1>
    <p>我是count{{count}}</p>
    <button @click="increment">点击改变count</button>
    <button @click="incrementN({n:5})">点击加5</button>
    <button @click="incrementWait">点击等1秒加</button>
    <button @click="getMovie">点击获取电影列表</button>
    <ul>
        <li v-for="movie in movieList" :key="movie.tvid">{{movie.albumName}}</li>
    </ul>
    <br>
    <ul>
        <li v-for="item in diyList" :key="item.tvid">{{item.albumName}}</li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
  name: "Footer",
  //获取vuex中的数据,可以通过this.$store.state.count得到
  computed:{
      ...mapState("count",["count"]),
      ...mapState("movie",["movieList"]),


      ...mapGetters("movie",['diyList']),
      /* diyList(){
          return this.$store.getters.diyList
      } */
  },
  methods:{
      //改变数据,可以通过this.$store.commit('increment')改变
      ...mapMutations(['increment','incrementN']),
      //异步改变数据
      ...mapActions("count",['incrementWait',]),
      ...mapActions("movie",['getMovie'])
  }  

};
</script>

<style>
</style>